import React, { useState } from 'react';
import { FileText, Search, BookOpen, Code, Zap, Settings, ExternalLink } from 'lucide-react';
import MenuToggle from '../components/MenuToggle';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';

const PluginDocs = ({ toggleSidebar }) => {
  const [searchQuery, setSearchQuery] = useState('');

  // 文档分类
  const docCategories = [
    {
      id: 'getting-started',
      title: '快速开始',
      icon: <Zap className="w-5 h-5" />,
      description: '插件开发入门指南',
      articles: [
        { title: '环境搭建', url: '#setup' },
        { title: '创建第一个插件', url: '#first-plugin' },
        { title: '插件结构说明', url: '#structure' },
        { title: '调试和测试', url: '#debug' }
      ]
    },
    {
      id: 'api-reference',
      title: 'API参考',
      icon: <Code className="w-5 h-5" />,
      description: '完整的API文档和示例',
      articles: [
        { title: '核心API', url: '#core-api' },
        { title: '事件系统', url: '#events' },
        { title: '存储API', url: '#storage' },
        { title: '网络请求', url: '#network' },
        { title: 'UI组件', url: '#ui-components' }
      ]
    },
    {
      id: 'guides',
      title: '开发指南',
      icon: <BookOpen className="w-5 h-5" />,
      description: '深入的开发教程和最佳实践',
      articles: [
        { title: '插件架构设计', url: '#architecture' },
        { title: '状态管理', url: '#state-management' },
        { title: '性能优化', url: '#performance' },
        { title: '安全考虑', url: '#security' },
        { title: '国际化支持', url: '#i18n' }
      ]
    },
    {
      id: 'examples',
      title: '示例代码',
      icon: <Settings className="w-5 h-5" />,
      description: '实用的插件示例和代码片段',
      articles: [
        { title: '文件处理插件', url: '#file-plugin' },
        { title: '数据可视化插件', url: '#chart-plugin' },
        { title: '表单验证插件', url: '#form-plugin' },
        { title: '主题切换插件', url: '#theme-plugin' }
      ]
    }
  ];

  // 示例代码
  const codeExamples = [
    {
      title: '基础插件结构',
      language: 'javascript',
      code: `export default class MyPlugin {
  constructor(options = {}) {
    this.name = 'MyPlugin';
    this.version = '1.0.0';
    this.options = options;
  }

  // 插件初始化
  async init() {
    console.log('插件初始化');
    this.bindEvents();
  }

  // 绑定事件
  bindEvents() {
    this.on('click', this.handleClick.bind(this));
  }

  // 处理点击事件
  handleClick(event) {
    console.log('按钮被点击', event);
  }

  // 插件销毁
  destroy() {
    this.off('click', this.handleClick);
    console.log('插件已销毁');
  }
}`
    },
    {
      title: '使用存储API',
      language: 'javascript',
      code: `// 保存数据
await this.storage.set('user_preferences', {
  theme: 'dark',
  language: 'zh-CN'
});

// 读取数据
const preferences = await this.storage.get('user_preferences');

// 删除数据
await this.storage.remove('user_preferences');

// 清空所有数据
await this.storage.clear();`
    },
    {
      title: '网络请求示例',
      language: 'javascript',
      code: `// GET请求
const response = await this.http.get('/api/users');

// POST请求
const newUser = await this.http.post('/api/users', {
  name: '张三',
  email: 'zhangsan@example.com'
});

// 带认证的请求
const data = await this.http.get('/api/protected', {
  headers: {
    'Authorization': 'Bearer ' + token
  }
});`
    }
  ];

  const filteredCategories = docCategories.filter(category =>
    category.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
    category.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
    category.articles.some(article => 
      article.title.toLowerCase().includes(searchQuery.toLowerCase())
    )
  );

  return (
    <>
      {/* 头部工具栏 */}
      <div className="mt-3">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            {/* 左侧：菜单按钮和标题 */}
            <div className="flex items-center space-x-4">
              <MenuToggle onClick={toggleSidebar} />
              
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center">
                  <FileText className="w-6 h-6 text-white" />
                </div>
                <div>
                  <h1 className="text-2xl font-bold text-material-grey-800">
                    开发文档
                  </h1>
                  <p className="text-sm text-material-grey-600">
                    插件开发完整指南和API参考
                  </p>
                </div>
              </div>
            </div>

            {/* 右侧：操作按钮 */}
            <div className="flex items-center space-x-3">
              <Button variant="outline">
                <ExternalLink className="w-4 h-4 mr-2" />
                在线文档
              </Button>
            </div>
          </div>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="flex-1 container mx-auto px-4 py-6">
        {/* 搜索栏 */}
        <Card className="mb-6">
          <CardContent className="p-6">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-material-grey-500" />
              <Input
                placeholder="搜索文档内容..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10"
              />
            </div>
          </CardContent>
        </Card>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* 左侧：文档导航 */}
          <div className="lg:col-span-1">
            <Card>
              <CardHeader>
                <CardTitle>文档导航</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                {filteredCategories.map((category) => (
                  <div key={category.id} className="space-y-2">
                    <div className="flex items-center space-x-2 p-2 rounded-lg bg-material-grey-50">
                      {category.icon}
                      <div>
                        <h3 className="font-medium text-material-grey-900">{category.title}</h3>
                        <p className="text-xs text-material-grey-600">{category.description}</p>
                      </div>
                    </div>
                    <div className="ml-7 space-y-1">
                      {category.articles.map((article, index) => (
                        <a
                          key={index}
                          href={article.url}
                          className="block text-sm text-material-grey-600 hover:text-primary hover:underline py-1"
                        >
                          {article.title}
                        </a>
                      ))}
                    </div>
                  </div>
                ))}
              </CardContent>
            </Card>
          </div>

          {/* 右侧：文档内容 */}
          <div className="lg:col-span-2">
            <Card>
              <CardContent className="p-6">
                <Tabs defaultValue="overview" className="w-full">
                  <TabsList className="grid w-full grid-cols-3">
                    <TabsTrigger value="overview">概述</TabsTrigger>
                    <TabsTrigger value="examples">示例代码</TabsTrigger>
                    <TabsTrigger value="faq">常见问题</TabsTrigger>
                  </TabsList>

                  <TabsContent value="overview" className="mt-6">
                    <div className="prose max-w-none">
                      <h2 className="text-2xl font-bold text-material-grey-900 mb-4">
                        插件开发概述
                      </h2>
                      
                      <div className="space-y-6">
                        <div>
                          <h3 className="text-lg font-semibold text-material-grey-800 mb-2">
                            什么是插件？
                          </h3>
                          <p className="text-material-grey-600 leading-relaxed">
                            插件是扩展系统功能的独立模块，可以为系统添加新的特性和功能。
                            通过插件系统，开发者可以创建自定义的功能模块，而无需修改核心代码。
                          </p>
                        </div>

                        <div>
                          <h3 className="text-lg font-semibold text-material-grey-800 mb-2">
                            插件架构
                          </h3>
                          <p className="text-material-grey-600 leading-relaxed mb-3">
                            我们的插件系统基于事件驱动架构，提供了丰富的API和钩子函数：
                          </p>
                          <ul className="list-disc list-inside space-y-1 text-material-grey-600">
                            <li>生命周期管理：init、destroy等钩子</li>
                            <li>事件系统：监听和触发自定义事件</li>
                            <li>存储API：持久化插件数据</li>
                            <li>网络API：发送HTTP请求</li>
                            <li>UI组件：创建自定义界面</li>
                          </ul>
                        </div>

                        <div>
                          <h3 className="text-lg font-semibold text-material-grey-800 mb-2">
                            开发流程
                          </h3>
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div className="p-4 border border-material-grey-200 rounded-lg">
                              <div className="flex items-center space-x-2 mb-2">
                                <Badge className="bg-blue-100 text-blue-800">1</Badge>
                                <span className="font-medium">环境准备</span>
                              </div>
                              <p className="text-sm text-material-grey-600">
                                安装开发工具，配置开发环境
                              </p>
                            </div>
                            <div className="p-4 border border-material-grey-200 rounded-lg">
                              <div className="flex items-center space-x-2 mb-2">
                                <Badge className="bg-green-100 text-green-800">2</Badge>
                                <span className="font-medium">创建插件</span>
                              </div>
                              <p className="text-sm text-material-grey-600">
                                使用模板创建插件基础结构
                              </p>
                            </div>
                            <div className="p-4 border border-material-grey-200 rounded-lg">
                              <div className="flex items-center space-x-2 mb-2">
                                <Badge className="bg-yellow-100 text-yellow-800">3</Badge>
                                <span className="font-medium">开发功能</span>
                              </div>
                              <p className="text-sm text-material-grey-600">
                                实现插件的核心功能和逻辑
                              </p>
                            </div>
                            <div className="p-4 border border-material-grey-200 rounded-lg">
                              <div className="flex items-center space-x-2 mb-2">
                                <Badge className="bg-purple-100 text-purple-800">4</Badge>
                                <span className="font-medium">测试发布</span>
                              </div>
                              <p className="text-sm text-material-grey-600">
                                测试插件功能，打包发布
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </TabsContent>

                  <TabsContent value="examples" className="mt-6">
                    <div className="space-y-6">
                      <h2 className="text-2xl font-bold text-material-grey-900">
                        代码示例
                      </h2>
                      
                      {codeExamples.map((example, index) => (
                        <div key={index} className="space-y-3">
                          <h3 className="text-lg font-semibold text-material-grey-800">
                            {example.title}
                          </h3>
                          <div className="bg-material-grey-900 text-white p-4 rounded-lg overflow-x-auto">
                            <pre className="text-sm">
                              <code>{example.code}</code>
                            </pre>
                          </div>
                        </div>
                      ))}
                    </div>
                  </TabsContent>

                  <TabsContent value="faq" className="mt-6">
                    <div className="space-y-6">
                      <h2 className="text-2xl font-bold text-material-grey-900">
                        常见问题
                      </h2>
                      
                      <div className="space-y-4">
                        <div className="p-4 border border-material-grey-200 rounded-lg">
                          <h3 className="font-semibold text-material-grey-800 mb-2">
                            如何调试插件？
                          </h3>
                          <p className="text-material-grey-600">
                            可以使用浏览器的开发者工具进行调试，也可以使用我们提供的调试工具。
                            在开发模式下，插件会输出详细的调试信息。
                          </p>
                        </div>

                        <div className="p-4 border border-material-grey-200 rounded-lg">
                          <h3 className="font-semibold text-material-grey-800 mb-2">
                            插件如何与系统通信？
                          </h3>
                          <p className="text-material-grey-600">
                            插件通过事件系统与系统核心通信。可以监听系统事件，也可以触发自定义事件。
                            同时提供了丰富的API接口供插件调用。
                          </p>
                        </div>

                        <div className="p-4 border border-material-grey-200 rounded-lg">
                          <h3 className="font-semibold text-material-grey-800 mb-2">
                            如何处理插件依赖？
                          </h3>
                          <p className="text-material-grey-600">
                            在manifest.json中声明插件依赖，系统会自动处理依赖关系。
                            支持版本约束和可选依赖。
                          </p>
                        </div>

                        <div className="p-4 border border-material-grey-200 rounded-lg">
                          <h3 className="font-semibold text-material-grey-800 mb-2">
                            插件性能优化建议？
                          </h3>
                          <p className="text-material-grey-600">
                            避免在主线程执行耗时操作，合理使用缓存，按需加载资源，
                            及时清理事件监听器和定时器。
                          </p>
                        </div>
                      </div>
                    </div>
                  </TabsContent>
                </Tabs>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </>
  );
};

export default PluginDocs;
